{% extends base.html %} 

{% block head %}
<script type="text/javascript" src="/static/lib/webuploader/webuploader.nolog.min.js"></script>

<style>
    textarea {
        outline: none;
        border-radius: 0px;
        font-size: 14px;
    }

    textarea:focus {
        border: 1px solid #8cc;
    }
</style>
{% end %} 

{% block body %} 

{% init back_btn_text = T("返回") %}
{% init error = "" %} 

<div class="alert">
    {{error}}
</div>

<div class="card">
    <form id="mainFrame" action="/note/update" enctype="multipart/form-data" method="POST" class="col-md-12">
        <div class="col-md-12" id="submit-div">
            <div>
                <span id="fileId" class="hide">{{file.id}}</span>
            </div>
            <div class="grid-title btn-line-height">
                <span>文档编辑</span>
                <div class="float-right">
                    <input type="button" id="actionBtn" class="btn btn-default" value="快捷操作"/>
                    <input type="button" id="backBtn"   class="btn btn-default" value="{{back_btn_text}}"/>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <span id="result" style="color:green"></span>
            <div class="col-md-12" id="editor-area">
                <div class="col-md-12">
                    <div id="edit-div">
                        <input style="display:none" name="id" value="{{file.id}}" />
                        <input type="text" name="version" value="{{file.version}}" class="hide" />
                        <input type="text" name="type" value="md" class="hide" />
                    </div>
                </div>

                <div class="col-md-12">
                    <div id="editor" class="col-md-12" style="height: auto; ">
                        <div id="markdown-input-div" class="col-md-12">
                            <textarea id="markdown-input" class="form-control" name="content" rows=15>{{file.content}}</textarea>
                        </div>

                        <div id="markdown-output-div" class="col-md-6 hide"></div>
                    </div>
                </div>
            </div>
        </div>

        <input type="file" id="uploadFileInput" class="hide"/>
        <input type="button" id="addAttachmentBtn" class="send-button btn btn-default" value="添加附件"/>
        <input type="submit" class="send-button btn save-note-btn" value="保存">
    </form>
</div>

{% include common/script/textarea_script.html %}

<script type="text/javascript">
// 支持上传文件
$(function () {
    function getContent() {
        return $("#markdown-input").val();
    }

    function getEditor() {
        return $("#markdown-input")[0];
    }

    // 记录初始内容
    var INITIAL_CONTENT = getContent();
    var IS_FORM_SUBMITTED = false;
    var DIALOG_INDEX = 0;

    $("#addAttachmentBtn").click(function () {
        xnote.requestUpload("#uploadFileInput", false, function (resp) {
            console.log(resp);
            var fileLink = resp.link;
            var oldContent = getContent();
            var newContent = oldContent + "\n" + fileLink + "\n";
            $("#markdown-input").val(newContent);
        });
    });

    function isContentChanged() {
        return getContent() !== INITIAL_CONTENT;
    }

    $("#mainFrame").on("submit", function (e) {
        console.log(e);
        IS_FORM_SUBMITTED = true;
    });

    function checkExit() {
        if (!isContentChanged()) {
            return;
        }

        if (IS_FORM_SUBMITTED) {
            return;
        }

        return "修改尚未提交, 确定离开当前页面吗？";
    }

    $("#backBtn").click(function() {
        var message = checkExit();
        if (message) {
            xnote.confirm(message, function() {
                history.back();
            });
        } else {
            history.back();
        }
    });

    $("#actionBtn").click(function () {
        $.get("/note/ajax/edit_symbol_dialog", function (resp) {
            DIALOG_INDEX = xnote.showDialog("请选择符号", resp);
        });
    });

    $("body").on("click", ".symbol-item-btn", function (e) {
        var target = e.target;
        var editor = getEditor();
        var text = $(target).attr("data-text");
        
        if (text === "" || text === undefined) {
            text = $(target).text();
        }

        console.log(text);
        textarea_insert(editor, text);
        layer.close(DIALOG_INDEX);
    });

    $("body").on("click", ".symbol-action-btn", function (e) {
        var target = e.target;
        var action = $(target).attr("data-action");

        var editor = getEditor();
        
        if (action == "finish_task") {
            textarea_replace_line(editor, "[]", "[x]");
        }
        
        if (action == "redo_task") {
            textarea_replace_line(editor, "[x]", "[]");
        }

        if (action == "note_link") {
            xnote.showAjaxDialog("选择笔记", "/search/dialog?search_type=note&callback=insertNoteLinkCallback");

            window.insertNoteLinkCallback = function (param) {
                var link = "[" + param.name + "](" + param.url + ")";
                textarea_insert(editor, link);
                xnote.closeDialog("last");
            };
        }

        layer.close(DIALOG_INDEX);
    });

    // 保存笔记
    $(".save-note-btn").click(function(e) {
        e.preventDefault();

        var params = {
            id: "{{file.id}}",
            version: "{{file.version}}",
            type: "md",
            content: getContent()
        };
        $.post("/note/save", params, function (resp) {
            if (resp.code == "success") {
                IS_FORM_SUBMITTED = true;
                xnote.toast("保存成功");
                setTimeout(function () {
                    window.location.href = "{{file.url}}";
                }, 500);
            } else {
                xnote.alert("保存失败:" + resp.message);
            }
        }).fail(function (error) {
            console.log(error);
            xnote.alert("保存失败");
        });
    });
})
</script>

<!-- GROUPS: {{file.groups}} -->
{% end %}